//获取登录按钮
var loginBtn = document.querySelector(" .member>div");
var loginDialog = document.querySelector("section.login");
loginBtn.onclick = function() {
  loginDialog.style.visibility = "visible";
};

//获取 × 按钮
var iconCloseBtn = document.querySelector("section.login i.icon-close");
iconCloseBtn.onclick = function() {
  loginDialog.style.visibility = "hidden";
};

//拖拽登录框
var loginDialog_close = document.querySelector("section.login .menu");
loginDialog_close.onmousedown = function(evt) {
  var oldEvt = evt || window.event;
  document.onmousemove = function(evt) {
    var e = evt || window.event;

    var left = e.clientX - oldEvt.offsetX;
    var top = e.clientY - oldEvt.offsetY;
    var loginDialog = document.querySelector("section.login .item");

    //边界限制
    if (left < 0) left = 0;
    if (top < 0) top = 0;
    var maxLeft =
      (window.innerWidth || document.documentElement.clientWidth) -
      loginDialog.offsetWidth;
    var maxTop =
      (window.innerHeight || document.documentElement.clientHeight) -
      loginDialog.offsetHeight;
    if (left > maxLeft) {
      left = maxLeft;
    }
    if (top > maxTop) {
      top = maxTop;
    }
    loginDialog.style.position = "absolute";
    loginDialog.style.top = top + "px";
    loginDialog.style.left = left + "px";
  };
  document.onmouseup = function() {
    document.onmousemove = null;
  };
};

//短信验证码
/*
登录倒计时
1 获取验证码倒计时按钮
2 绑定事件 
  2.1 将页面按钮文字改成【5秒后重发】
  2.2 全局变量num存放计时5s，事件触发num--，计时器同步更新

*/
var num = 5;
var captchaBtn = document.querySelector("section.login .captcha");
captchaBtn.onclick = function() {
  //获取行为验证码对话框
  var captchaObj = document.querySelector("section.captcha");
  //默认点击获取验证码，先核对行为验证码-通过才获取短信
  captchaObj.style.visibility = "visible";
  //获取关闭按钮，绑定行为验证码关闭事件
  document.querySelector("section.captcha i.icon-close").onclick = function() {
    captchaObj.style.visibility = "hidden";
  };

  //获取滑块，绑定鼠标按下事件

  //处理函数 网页绑定鼠标移动事件--滑块和卡片同步移动
  var dragBtn = captchaObj.querySelector(".drag .btn");
  dragBtn.onmousedown = function(evt) {
    var oldEvt = evt || window.event;
    document.onmousemove = function(evt) {
      //获取事件对象
      var e = evt || window.event;
      //获取鼠标位置
      var left = e.clientX - oldEvt.clientX;
      // console.log(left, e.clientX, oldEvt.clientX);
      //TODO 限制边界
      var maxLeft = captchaObj.offsetWidth;
      // console.log(left - maxLeft);
      if (left - maxLeft < -400 || left - maxLeft > -72) {
        left = 0;
      }
      dragBtn.style.left = left + "px";
      captchaObj.querySelector(".check img:nth-of-type(2)").style.left =
        left + "px";
    };
    //处理函数 网页绑定鼠标松开事件-取消滑块移动
    document.onmouseup = function() {
      //取消网页移动
      document.onmousemove = null;
      //获取行为验证码的结果--结果在区间内，就关闭行为验证码，短信倒计时，否则，滑块返回起点
      var value = parseInt(dragBtn.style.left);
      // console.log(value);
      if (value >= 260 && value <= 265) {
        //隐藏
        captchaObj.style.visibility = "hidden";

        //开始倒计时
        captchaBtn.innerText = num + "秒后重发";
        captchaBtn.disabled = true;
        //倒计时定时器5s
        t = setInterval(function() {
          if (num <= 1) {
            clearInterval(t);
            captchaBtn.innerText = "重新发送";
            num = 5;
            captchaBtn.disabled = false;
            return;
          }
          num--;
          captchaBtn.innerText = num + "秒后重发";
        }, 1000);
      }
      dragBtn.style.left = "0px";
      captchaObj.querySelector(".check img:nth-of-type(2)").style.left = "0px";
    };
  };
  //终止鼠标按下移动滑块事件（行为验证码）
  return;
};

//验证输入手机换和验证码是否符合规范
/*
获取登录注册按钮
绑定点击事件
获取手机号判断
获取验证码判断
*/
var loginSubmitBtn = document.querySelector("section.login .submit");
loginSubmitBtn.onclick = function() {
  var flag = 0;
  var mobileObj = document.querySelector(".mobile");
  if (
    mobileObj.value == "" ||
    mobileObj.value.length != 11 ||
    !Number(mobileObj.value)
  ) {
    document.querySelector("section.login .form>p:nth-of-type(3)").innerText =
      "手机号码有误📱";
  } else {
    flag++;
    document.querySelector("section.login .form>p:nth-of-type(3)").innerText =
      "";
  }
  //获取验证码判断4位全为数字
  //TODO：后续可以用正则优化，不仅仅只为数字
  var pasdObj = document.querySelector(".password");
  if (
    pasdObj.value == "" ||
    pasdObj.value.length != 4 ||
    !Number(pasdObj.value)
  ) {
    document.querySelector("section.login .form > p:nth-of-type(4)").innerText =
      "验证码只能是4位村数字🔢";
  } else {
    flag++;
    document.querySelector("section.login .form > p:nth-of-type(4)").innerText =
      "";
  }
  //手机和验证码输入都没问题，提交表单
  if (flag == 2) {
    alert("登陆成功");
  }
};
